<template>
  <el-dialog title="账单明细" width="90vw" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div class="h-[80vh] flex" style="flex-direction: column">
      <VTable ref="tableRef" v-bind="orderOptions">
        <template #form="{ form }">
          <div class="pb-[8px]">
            <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="form" :originOption="originOption" />
          </div>
        </template>
      </VTable>
    </div>
    <template #footer>
      <el-button @click="handleClose"> 关闭 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { computed, nextTick, watch } from "vue"
import XForm from "@/components/XForm/index.vue"
import { groupArchiveDetail } from "../api/index.js"

const formOption = ref({})
const formData = ref({})

const tableRef = ref()

// 查询
const handleSubmitForm = async () => {
  tableRef?.value.commitProxy("query")
}

// 枚举 数据
const originOption = ref({})
onMounted(() => {})
const fieldList = ref([
  {
    field: "skuRange",
    placeholder: "可批量搜索",
    type: "textarea",
    style: { width: "200px" },
    select: [
      { label: "平台订单号", value: "platform_order_sn" },
      { label: "渠道SKU", value: "platform_sku" },
    ],
  },
])
const modelValue = ref(false)

const emit = defineEmits(["refresh", "close"])

const info = ref({ shop: "aaa" })

const orderTableData = ref([])
const orderOptions = reactive({
  formConfig: {
    data: {
      skuRange: { type: "platform_order_sn", value: "" },
    },
  },

  border: true,
  loading: false,
  resizable: true,
  rowConfig: { height: "74" },
  columns: [
    { title: "ID", field: "id" },
    { title: "店铺", field: "shop", width: 180 },
    { title: "站点", field: "site", width: 100 },
    { title: "报告类型", field: "report_type", width: 100 },
    { title: "平台订单号", field: "orderId", width: 120 },
    { title: "来源", field: "source", width: 100 },
    { title: "渠道SKU", field: "platformSku", width: 100 },
    { title: "交易类型", field: "transactionType" },
    { title: "结算时间(UTC)", field: "settlementTime", width: 140 },
    { title: "币种", field: "currency", width: 100 },
    { title: "金额", field: "amount", width: 100 },
    { title: "数量", field: "quantity", width: 100 },
  ],

  pagerConfig: {
    pageNum: 1,
    pageSize: 20,
  },

  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: async ({ page }) => {
        let param = {
          id: formData.value.id,
        }
        const res = await groupArchiveDetail(param)
        return res
      },
    },
  },
})

const handleClose = () => {
  modelValue.value = false
  formData.value = {}
}
const open = (row) => {
  formData.value = row
  modelValue.value = true
  nextTick(() => {
    handleSubmitForm()
  })
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
